<template>
  <header>
    <div class="left">
      <i class="iconfont icon-zuo" @click="$router.back()"></i>
    </div>
    <div class="center"><slot></slot></div>
    <div class="right">
      <span><slot name="right"></slot></span>
    </div>
  </header>
</template>

<script>
export default {
  name: 'AppNavBar'
}
</script>

<style scoped lang='less'>
header {
  // 固定
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: var(--color-tint);
  height: 50px;
  display: flex;
  align-items: center;
  color: #fff;
  box-shadow: 0px 3px rgba(0, 0, 0, 0.1);
  div {
    flex: 1;
  }
  .left {
    i {
      padding-left: 20px;
    }
  }
  .center {
    text-align: center;
  }
  .right {
    text-align: right;
    span {
      padding-right: 20px;
    }
  }
}
</style>
